<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">任务备件出库</block>
		</cu-custom>
		<view class="bg-top bg-blue">
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view style="margin-left: 0rpx;" class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">基础信息</text>
							<text class="text-ABC text-blue">BASE</text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="colorRed">*</text>
							<text class='text-lg'>选择仓库</text>
						</view>
						<view style="flex:1;" class="action">
							<picker @change="bindPickerWarehouse" range-key="Name" :value="indexWarehouse" :range="Warehouse">
								<view class="uni-input">{{Warehouse[indexWarehouse].Name}}</view>
							</picker>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="colorRed">*</text>
							<text class='text-lg'>{{typeName}}类型</text>
						</view>
						<view style="flex:1;" class="action">
							<picker @change="bindPickerDataTypeList" range-key="Name" :value="indexDataType" :range="DataTypeList">
								<view class="uni-input">{{DataTypeList[indexDataType].Name}}</view>
							</picker>
						</view>
					</view>
					<view v-if="false" class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="colorWhite">*</text>
							<text class='text-lg'>供应商</text>
						</view>
						<view style="flex:1;" class="action">
							<picker @change="bindPickerSupplier" range-key="Name" :value="indexSuppliere" :range="supplier">
								<view class="uni-input">{{supplier[indexSuppliere].Name}}</view>
							</picker>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text  class="colorWhite">*</text>
							<text class='text-lg'>备注</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input"  placeholder="请填写备注" v-model="Remark" />
						</view>
					</view>
				</view>
			</view>
			
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view style="margin-left: 0rpx;" class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">备件信息</text>
							<text class="text-ABC text-blue">Spare</text>
						</view>
					</view>
					
					<view style="padding-bottom: 20rpx;" class="content-body">
						<view class="choisespare" @click="choisespareNew">
							<text style="margin-right: 10rpx;" class="bxImg cuIcon-add text-blue"></text>
							选择备件
						</view>
					</view>
					<view v-if="chooseSpareList.length>0" v-for="(item,index) in chooseSpareList" :key="index" class="goodsInfo">
						<view class="goodsInfo-right">
							<image :src="baseUrl+item.Pictures" class="goods-image" mode=""></image>
							<view class="goodsInfo-box">
								<view class="goods-box">
									<text class="goods-name">{{item.SpareName}}</text>
									<text @click="delChooseSpare(item.SpareId)" class="goods-price cuIcon-delete"></text>
								</view>
								<text class="spe">编码：{{item.SpareCode}}</text>
								<text class="spe">库存：{{item.TotalInventory}}</text>
								<text class="spe">仓库：{{item.warehouseName}}</text>
								<view class="goods-box">
									<text class="goods-price1">数量：{{item.ApplyCounts}}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="chooseSpareList.length==0">
						<image :src="emptyData" class="topImg" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 160rpx;">
				
			</view>
			<view class="publish-goods-wrap">
				<view class="publish-goods-btn" @click="submit">提交{{typeName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				baseUrl:this.$request22.baseUrl1,
				emptyData: this.$request22.baseUrl1+'/Resource/Sg/empty/empty.png',
				spareNoData:this.$request22.baseUrl1+'/Resource/Sg/spare/sparenodata.png',
				DataTypeList: [],
				Warehouse: [],
				supplier: [],
				indexDataType: 0,
				indexWarehouse: 0,
				indexSuppliere: 0,
				typeName:'入库',
				Remark:'',
				getSearchOption:{
					type:'in',
				},
				chooseSpareList:[
				],
				logId: ''
			}
		},
		onLoad(options) {
			let that=this
			let type=options.type
			that.getSearchOption.type=type
			that.logId = options.logId
			if(type=='out'){
				that.typeName='出库'
			}
			if(type=='in'){
				that.typeName='入库'
			}
			that.GetInOutSpareParams();
			that.chooseSpareList=[]
		},
		onShow(){
			let that=this
			uni.$on('chooseSpareList',function(data){
				that.chooseSpareList.push(...data)
				uni.$off('chooseSpareList');
			})
		},
		methods: {
			bindPickerWarehouse: function(e) {
				this.indexWarehouse = e.detail.value
			},
			bindPickerDataTypeList: function(e) {
				this.indexDataType = e.detail.value
			},
			bindPickerSupplier: function(e) {
				this.indexSuppliere = e.detail.value
			},
			choisespareNew(){
				let that=this
				//直接带着仓库id跳转
				if(that.Warehouse.length==0){
					uni.showToast({ title:'请选择仓库', icon: 'none' ,duration:2000});
				}
				if(that.DataTypeList.length==0){
					uni.showToast({ title:'请选择出入库类型', icon: 'none' ,duration:2000});
				}
				let isAll=0;
				if(that.getSearchOption.type=='in'){
					isAll=1
				}
				uni.navigateTo({
					url:'/pages-device/spare/chooseSpareNew?warehouseId='+that.Warehouse[that.indexWarehouse].Id+'&warehouseName='+that.Warehouse[that.indexWarehouse].Name+'&IsAllList='+isAll
				})
			},
			delChooseSpare(SpareId){
				let that=this
				const itemIndex = that.chooseSpareList.findIndex((item) => item.SpareId === SpareId);
				if (itemIndex !== -1) {
					that.chooseSpareList.splice(itemIndex, 1);
					uni.showToast({ title:'删除成功', icon: 'none' ,duration:2000});
				}else{
					uni.showToast({ title:'删除失败', icon: 'none' ,duration:2000});
				}
			},
			GetInOutSpareParams(){
				let that=this
				uni.showLoading({
					title: '加载中...'
				})
				//加载人员数据
				let opts = {
					url: 'SpareApi/GetInOutSpareParams',
					method: 'get'
				};
				request.httpTokenRequest(opts,that.getSearchOption).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.DataTypeList=res.data.data.DataTypeList
						that.Warehouse=res.data.data.Warehouse
						that.supplier=res.data.data.supplier
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});	
			},
			submit(){
				let that=this
				if(that.chooseSpareList.length==0){
					uni.showToast({ title:'请选择备件', icon: 'none' ,duration:3000});
				}
				uni.showLoading({
					title: '提交中...'
				})
				//加载人员数据
				let opts = {
					// url: 'SpareApi/SubmitInOutSpare',
					url: 'SpareApi/SubmitInOutSpareJoinWork',
					method: 'POST'
				};
				let submitData={
					warehouseId:that.Warehouse[that.indexWarehouse].Id,
					InOutType:that.getSearchOption.type,
					DirectionType:that.DataTypeList[that.indexDataType].Id,
					Remark:that.Remark,
					SubmitInOutSpareList:that.chooseSpareList,
					logId: that.logId
				}
				request.httpTokenRequest(opts,submitData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '添加成功', icon: 'none' });
						uni.navigateBack({
							delta: 1, 
						});
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});	
			},
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 20rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	
	.action{
		text-align: right;
	}
	.colorRed {
		color: red;
		padding: 0 10rpx;
	}
	.colorWhite {
		color: white;
		padding: 0 10rpx;
	}
	.goodsInfo {
		width: 690rpx;
		height: 266rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #EDEDED;
		
		&:nth-last-child(1) {
			border: none;
		}
		
		.checked-image {
			width: 36rpx;
			height: 36rpx;
		}
		
		.goodsInfo-right {
			width: 634rpx;
			height: 246rpx;
			margin-left: 0rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		
			.goods-image {
				width: 180rpx;
				height: 180rpx;
			}
		
			.goodsInfo-box {
				width: 428rpx;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
		
				.goods-name {
					width: 400rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #313133;
					
				}
		
				.spe {
					width: 428rpx;
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #919298;
				}
		
				.goods-box {
					width: 428rpx;
					margin-top: 18rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
		
					.goods-price {
						font-size: 36rpx;
						font-weight: 400;
						color: #e7612e;
					}
					.goods-price1 {
						font-size: 28rpx;
						font-weight: 600;
						color: #54B886;
					}
					
					.goods-num-box {
						width: 168rpx;
						height: 46rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
		
						.goods-image {
							width: 46rpx;
							height: 44rpx;
							text-align: center;
							line-height: 44rpx;
							border: 1rpx solid #CFCFCF;
							font-size: 38rpx;
						}
		
						.goods-num {
							width: 76rpx;
							height: 44rpx;
							text-align: center;
							line-height: 44rpx;
							font-size: 33rpx;
							font-weight: 400;
							color: #666666;
							border-top: 1px solid #CFCFCF;
							border-bottom: 1px solid #CFCFCF;
						}
					}
				}
			}
		}
	}
	.content-body{
		padding-top: 20rpx;
		padding-bottom: 200rpx;
		width: 100%;
		background-color: white;
	}
	.choisespare{
		margin:auto;
		background: #F3F4F6;
		color: #333333;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		width: 320rpx;
		font-weight: 600;
	}
	.topImg{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}
</style>
